import React from 'react';
import ReactDOM from 'react-dom';
import useClientRect from './hooks/useClientRect';
import useRouteQuery from './hooks/useRouteQuery';

const ClientRect = () => {
  const [rect, ref] = useClientRect();
  console.log('rect: ', rect);
  // const a = useRouteQuery({ key: 'a' });
  // console.log('a: ', a);
  return (
    <div className="client-rect-wrapper" style={{ position: 'relative' }}>
      <div
        ref={ref}
        style={{
          width: '500px',
          height: '300px',
          background: 'red',
          position: 'absolute',
          top: '50px',
          left: '100px',
        }}
      ></div>
    </div>
  );
};

ReactDOM.render(<ClientRect />, document.getElementById('root'));
